
import React, { memo, useEffect, useRef, useState } from "react";
import cs from 'classnames';
import sty from './sty.module.css';
import ThemeHeaderRcm from '@/components/themeHeaderRcm';
import AlbumCover from '@/components/albumCover';

import { reqNewAlbums } from '@/api/recommend';
import userEvent from "@testing-library/user-event";
import { Carousel, message } from "antd";
const NewAlbum = () => {
  const [albumsData, setALbums] = useState([]);
  const bannerRef = useRef(null);
  useEffect(() => {
    reqNewAlbums().then(res => {
      if (res.code === 200) {
        setALbums(res.albums)
      }
    }).catch(() => {
      message.error('请求异常,请重试')
    })
  }, [])


  return <div>
    <ThemeHeaderRcm title='新碟上架' />
    <div className={cs(sty.content, 'flex3')}>
      <Carousel dots={false}
        ref={bannerRef}

        className={sty.banner}
      >{
          !!albumsData.length && [0, 1].map(v => (<div className={sty.page} key={v} >
            {
              albumsData.slice(v * 5, (v + 1) * 5).map(item => <AlbumCover key={item.id} info={item} />)
            }
          </div>))

        }

      </Carousel>
      <div className={cs(sty.arrow, 'sprite_02', sty.btnLeft)} onClick={() => bannerRef.current.prev()}></div>
      <div className={cs(sty.arrow, 'sprite_02', sty.btnRight)} onClick={() => bannerRef.current.next()}></div>
    </div>
  </div>
}

export default memo(NewAlbum)